<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model :model="form" :rules="rules" ref="ruleForm" >
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="12">
            <a-form-model-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="模板标题"
                style="margin-right: -35px"
                prop="templateName"
            >
              <a-input
                  :disabled="disabled"
                  placeholder="请输入模板标题"
                  v-model="form.templateName"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
                prop="templateType"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="模板类型">
              <j-dict-select-tag
                  :disabled="disabled"
                  @change="handleChangeTemplateType"
                  :triggerChange="true"
                  dictCode="msgType"
                  v-model="form.templateType"
                  placeholder="请选择模板类型">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="12">
            <a-form-model-item
                prop="templatePlatform"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="推送平台"
                style="margin-right: -35px"
            >
              <j-multi-select-tag
                  :disabled="disabled"
                  :triggerChange="true"
                  dictCode="terrace"
                  v-model="form.templatePlatform"
                  placeholder="请选择推送平台">
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
                prop="templateBusiness"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="业务类型">
              <j-dict-select-tag
                  :disabled="disabled"
                  :triggerChange="true"
                  dictCode="service_type"
                  v-model="form.templateBusiness"
                  placeholder="业务类型">
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }"  >

          <a-col :span="12">
            <a-form-model-item
                prop="templatePushType"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="推送方式">
              <j-multi-select-tag
                  :disabled="disabled"
                  dictCode="propelling_way"
                  v-model="form.templatePushType"
                  placeholder="请选择推送方式">
              </j-multi-select-tag>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }"  >

          <a-col :span="12">
            <a-form-model-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="是否应用">
              <a-switch @change="changeY"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="是否常提醒">
              <a-switch @change="changeC"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="4">
            <a-form-model-item
                v-show="!useEditor"
                prop="templateContent"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="模板内容"
                style="margin-left: 4px;width: 126%">
              <a-textarea :disabled="disabled" placeholder="请输入模板内容" v-model="form.templateContent" :autosize="{ minRows: 8, maxRows: 8 }"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="4">
            <a-form-model-item
                v-show="useEditor"
                prop="templateContent"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="模板内容"
                style="margin-left: 4px;width: 126%">
              <j-editor :disabled="disabled" v-model="form.templateContent"></j-editor>
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAction, httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import {duplicateCheck} from '@/api/api'
import JEditor from '@/components/jeecg/JEditor'
import JSwitch from '@/components/jeecg/JSwitch'
import * as returnVisitApi from "@api/sjsk/help/returnVisit";
import {sysMessageAdd, sysMessageEdit, sysMessageTemplateAdd, sysMessageTemplateEdit} from "@api/sjsk/information";
import {JeecgListMixin} from "@/mixins/JeecgListMixin";

export default {
  name: "SysMessageTemplateModal",
  mixins: [JeecgListMixin],
  components:{
    JEditor,
    JSwitch
  },
  data() {
    return {
      title: "操作",
      formA:false,
      formB:false,
      visible: false,
      disabled: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      form: {
        useStatus:'1',
        templateRemind:'1'
      },
      rules: {
        templateName: [{required: true, message: '请输入模板标题!' }],
        templateType: [{required: true, message: '请输入模板标题!'}],
        templatePlatform: [{required: true, message: '请选择推送标题!'}],
        templateBusiness:[{required: true, message: '请选择推送对象!'}],
        esSendTimeStatus:[{required: true, message: '请选择推送时间!'}],
        templatePushType: [{required: true, message: '请选择推送方式!'}],
        templateContent: [{required: true, message: '请输入消息内容!'}],
      },
      url: {
        add: "/sys/message/sysMessageTemplate/add",
        edit: "/sys/message/sysMessageTemplate/edit",
        listColl:"/sys/message/sysMessageTemplate/list"
      },
      useEditor:false,
      templateEditorContent:"",
      dataSource:[],
      templateContent:undefined,
      editTexr:false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    add() {
      this.disabled = false;
      this.visible = true;
    },
    edit(record) {
      this.visible = true;
      this.editTexr = true
      this.disable = false;
      this.form = record
    },
    close() {
      this.visible = false;
      this.disable = true;
      this.form = {}
    },
    look(val){
      this.disabled = true;
      this.visible = true;
      this.form = val
    },
    changeY(checked){
      if(checked){
        this.form.useStatus = '1'
      } else {
        this.form.useStatus = '2'
      }
    },
    changeC(checked){
      if(checked){
        this.form.templateRemind = '1'
      } else {
        this.form.templateRemind = '2'
      }
    },
    handleOk() {
      if(!this.disable){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            console.log(this.form)
            sysMessageTemplateAdd(this.form).then(ser => {
              if(ser.success){
                this.loadData()
                this.visible = false
              }
              console.log(ser)
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log(6)
          }
        })
      }
      if(this.editTexr){
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log(this.form)
            sysMessageTemplateEdit(this.form).then(ser => {
              console.log(ser)
              if(ser.success){
                this.loadData()
                this.visible = false
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log(6)
          }
        })
      }
      this.$emit('refes','123123')
      // this.model.templateType = this.templateType;
      const that = this;
      //触发表单验证
      // this.form.validateFields((err, values) => {
      //   console.log(err,values)
      // })
    },
    validateTemplateCode(rule, value, callback){
      var params = {
        tableName: "sys_sms_template",
        fieldName: "template_code",
        fieldVal: value,
        dataId: this.model.id
      }
      duplicateCheck(params).then((res)=>{
        if(res.success){
          callback();
        }else{
          callback(res.message);
        }
      })

    },
    handleCancel() {
      this.close()
    },
    handleChangeTemplateType(value){
      //如果是邮件类型那么则改变模板内容是富文本编辑器
      this.useEditor = (value==2 || value==4)

      for(let item of this.dataSource){
        if(item.templateCode === value){
          this.$set(this.form, 'templateType', item.templateType);
          this.useEditor = item.templateType === '2'
          this.$set(this.form, 'templateContent', item.templateContent);
          console.log(this.form.templateContent)
        }
      }
    },
    loadData(arg) {
      if(!this.url.listColl){
        this.$message.error("请设置url.listColl属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      // var params = this.getQueryParams();//查询条件
      // this.loading = true;
      getAction(this.url.listColl).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records||res.result;
          for(let item of this.dataSource){
            item.text = item.templateName
            item.value = item.templateCode
          }
          console.log(this.dataSource)

        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // this.loading = false
      })
    },
  }
}
</script>

<style scoped>

</style>
